<template>
  <view class="container-withdrawal_success">
    <header>
      <view class='head-top' @click="$goPath(1)">
        <image src="/static/images/right-white.png" mode='aspectFit|aspectFill|widthFix' alt="" />
      </view>

      <view class='head-btm' v-if="payType == null">
        <u-icon name="reload" color="#fff" size="30px" />
        <text>正在查询充值状态</text>
      </view>

      <view class='head-btm' v-else-if="payType">
        <u-icon name="checkmark-circle-fill" color="#fff" size="30px" />
        <text>充值成功!</text>
      </view>

      <view class='head-btm' v-else>
        <!-- <u-icon name="close-circle-fill" color="#fff" size="30px" /> -->
        <text>充值失败</text>
      </view>
    </header>

    <section>
      <view class='sect-infoCard'>
        <view v-if="JSON.stringify(detail) != '{}'">
          <view class='infoCard-price' v-if="detail.type == '余额充值'">￥<text>{{ detail.money }}</text></view>
          <view class='infoCard-price' v-else><text>{{ detail.money }}</text>张</view>

          <view class='infoCard-number'>
            <view>充值金额</view>
            <view v-if="detail.type == '余额充值'">￥<text>{{ detail.money }}</text></view>
            <view v-else><text>{{ detail.money }}</text>张</view>
          </view>

          <view class='infoCard-number'>
            <view>充值类型</view>
            <view><text>{{ detail.type }}</text></view>
          </view>

          <view class='infoCard-number'>
            <view>支付方式</view>
            <view><text>{{ detail.rechargeType }}</text></view>
          </view>
        </view>
      </view>
    </section>

  </view>
</template>
<script>

export default {
  data() {
    return {
      info: {},
      detail: {},
      id: '',
      payType: false,
    }
  },
  onLoad(options) {
    this.detail = JSON.parse(options.detail);
    this.id = options.id;
  },
  onShow(){
    this.getPayResult();
  },
  methods: {
    // 查询支付结果
    async getPayResult() {
      let result = await this.$request.orderGetPayResult({ id: this.id })
      this.payType = result.data;
    },
  },
}
</script>
<style lang="scss" scoped>
.container-withdrawal_success {
  width: 100%;
  height: 100vh;
  font-size: 14px;
  font-family: 'PingFang SC-Medium';
  background: #FFFFFF;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    padding: 60px 12px 50px;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    font-size: 18px;
    font-family: 'PingFang SC-Bold';
    display: flex;
    flex-direction: column;

    .head-top {
      image {
        width: 8px;
        height: 16px;
        display: block;
        margin-right: 3px;
      }
    }

    .head-btm {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 20px;
      font-family: 'PingFang SC-Bold';

      text {
        margin-left: 12px;
      }
    }
  }

  section {
    padding: 0 26px;
    box-sizing: border-box;

    .sect-infoCard {
      width: 100%;
      height: 237px;
      background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/rechargeSuccess-card.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      top: -30px;
      padding: 0 30px;
      box-sizing: border-box;

      .infoCard-price {
        width: 100%;
        text-align: center;
        padding-top: 23px;
        box-sizing: border-box;
        margin-bottom: 35px;

        text {
          font-family: 'DIN-Medium';
          font-size: 24px;
        }
      }

      .infoCard-number {
        color: #999999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding-right: 12px;
        box-sizing: border-box;
        font-size: 14px;

        view:last-child {
          color: #333;
        }
      }

      .infoCard-number:last-child {
        margin-bottom: 0;
      }

    }
  }
}
</style>